<template>
    <a-upload
            name="avatar"
            :show-upload-list="false"
            :action="action"
            :before-upload="beforeUpload"
            :customRequest="customRequest"
            @change="handleChange"
    >
            <a-button> <a-icon type="upload"/> 上传图片
            </a-button>
        </a-upload>
</template>

<script>


    import uploadApi from "../../api/upload";

    export default {
        name: "HiddenUpLoad",
        props: {
            action: String,
            index:Number //sku上传图片的所在表格行数
        },
        data() {
            return {
                loading: false,
            };
        },
        methods: {
            handleChange(info) {
                console.log(info)
                /* if (info.file.status === 'uploading') {
                     this.loading = true;
                     return;
                 }
                 if (info.file.status === 'done') {
                     // Get this url from response in real world.
                     getBase64(info.file.originFileObj, imageUrl => {
                         this.$emit("change-image-url",imageUrl)
                         // this.imageUrl = imageUrl;
                         this.loading = false;
                     });
                 }*/
            },
            beforeUpload(file) {
                const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
                if (!isJpgOrPng) {
                    this.$message.error('You can only upload JPG file!');
                }
                const isLt2M = file.size / 1024 / 1024 < 3;
                if (!isLt2M) {
                    this.$message.error('大小不能超过3MB!');
                }
                return isJpgOrPng && isLt2M;
            },
            /**
             * 自定义上传
             */
            customRequest(data) {
                let formData = new FormData();
                formData.append("file", data.file);
                this.saveFile(formData, data.file.name);
            },
            saveFile(formData, filename) {
                this.loading = true;
                // this.$emit("getImageUrl", "http://120.27.212.10:9090/group1/M00/00/00/eBvUCl_bhe2AaeD0AABxL49j5Dw149.jpg",this.index)
                 uploadApi
                     .uploadCommon(formData,3)
                     .then(resp => {
                         if (resp.data.flag) {
                             const file = {};
                             file.uid = -2;
                             file.name = filename;
                             file.thumbUrl = resp.data.data;
                             this.$emit("getImageUrl", file.thumbUrl,this.index)
                             this.$message.success("上传成功");
                             this.loading = false;

                         } else {
                             this.loading = false;
                             this.$message.error(resp.data.message);
                         }
                     })
                     .catch(error => {
                         console.log(error)
                         this.loading = false;

                         this.$message.error(error);
                     });
            },
        },
    };
</script>
<style>
    .avatar-uploader > .ant-upload {
        width: 128px;
        height: 128px;
    }

    .ant-upload-select-picture-card i {
        font-size: 32px;
        color: #999;
    }

    .ant-upload-select-picture-card .ant-upload-text {
        margin-top: 8px;
        color: #666;
    }
</style>